<template>
 <div id="bo">
  <template v-for="item in bos">
   <div class="a" :key="item.id">
    <div class="nav">
     <img :src="item.al.picUrl" alt="" />
     <div>你知道这首歌居然被这么评论</div>
    </div>
    <div class="nab">
     <span>打开看看</span>
    </div>
   </div>
  </template>
  <div class="t" @click="bofan" ref="ab" :style="dong">
   <i :class="{ act: isRun }" class="iconfont icon-bofang"></i>
   <img
    class="tu"
    src="http://s3.music.126.net/mobile-new/img/disc.png?d3bdd10"
    alt=""
   />
   <template v-for="item in bos">
    <div :key="item.id">
     <img class="hh" :src="item.al.picUrl" alt="" />
    </div>
   </template>
  </div>
  <audio ref="audio" :src="oo"></audio>
  <template v-for="item in bos">
   <div
    style="text-align: center;color: #f1f1f1; margin-top: 20px;"
    :key="item.mark"
   >
    <span>{{ item.name }} - {{ item.ar[0].name }}</span>
   </div>
  </template>
  <div class="yin" ref="lyric">
   <template v-for="(it, index) in ge">
    <div class="tr" :style=io :key="index" ref="tr">
     {{ it }}
     <!-- {{ge[aa]}}
             {{index}} -->
    </div>
   </template>
  </div>
 </div>
</template>

<script>
export default {
 created() {
  // console.log(this.$route.query.id);
 },
 data: () => {
  return {
   bos: [],
   ba: [],
   oo: "",
   ge: [],
   isRun: false,
   run: "",
   io: {
    transform: "translateY(0)",
     color: "#000",
     
   },
   dong: {
    transform: `rotate(0)`,
  
   },
   aa: 0,
   bb: 0,

   // lyricIndex:0,
   // isShowMusicList:true
  };
 },

 methods: {
  async fn() {
   let bo = await this._axios.get(`/song/detail?ids=${this.$route.query.id}`);
   let fan = await this._axios.get(`/lyric?id=${this.$route.query.id}`);
   let ll = await this._axios.get(`/song/url?id=${this.$route.query.id}`);
   // console.log(ll.data.data[0].url);
   this.oo = ll.data.data[0].url;
   // console.log(this.oo);
   this.bos = bo.data.songs;
   console.log(this.bos);

   let lyricArr = fan.data.lrc.lyric.split("[").slice(1);
   let lrcObj = {};
   lyricArr.forEach((item) => {
    let arr = item.split("]");
    let m = parseInt(arr[0].split(":")[0]);
    let s = parseInt(arr[0].split(":")[1]);
    arr[0] = m * 60 + s;
    if (arr[1] != "\n") {
     lrcObj[arr[0]] = arr[1];
    }
    this.ge = lrcObj;
   });
   //  console.log(this.ge);
   //  console.log(this.run);
   // console.log(this.bos);
   // console.log(this.ba);
   // console.log(bo);
  },
  bofan() {
   this.isRun = !this.isRun;

   if (this.isRun) {
    this.$refs["audio"].play();
    this.time = setInterval(() => {
     this.run = parseInt(this.$refs.audio.currentTime);
     this.dong.transform = `rotate(${this.bb++}deg)`;
    }, 100);

    // console.log(this.run);
   } else {
    this.$refs["audio"].pause();
    clearTimeout(this.time);
   }
  },
 },
 mounted() {
  this.fn();
 },
 watch: {
  run() {
   //   console.log(this.run);
   for (let key in this.ge) {
    if (this.run == key) {
         this.$refs.tr.forEach(item => {
             item.style.color = "#000";
             item.style.fontSize = "16px"
         })
        // this.io.color = `#000`;
         this.$refs.tr[this.aa].style.color = "#fff";
     this.io.transform = `translateY(-${this.aa++}00%)`;
     
     //   console.log(key);
     console.log(this.ge[key]);
     console.log(this.aa);

    }   
   }
  },
 },
};
</script>

<style lang="scss" scoped>
#bo {
    
 background-image: url(https://p1.music.126.net/BKmoyFBZ67oaHeMtIeBi1g==/109951165048116778.jpg);
 height: _vw(1330);

 .a {
  display: flex;
  line-height: _vw(100);
  height: _vw(100);
  text-align: center;
  justify-content: space-around;
  align-items: center;
  padding-top: _vw(20);
  color: #fff;
  .nav {
   display: flex;

   div {
    margin-left: _vw(20);
   }

   img {
    margin-top: _vw(10);
    width: _vw(56);
    height: _vw(56);
    border-radius: 50%;
   }
  }
 }
 audio {
  display: none;
 }
 .act {
  display: none;
 }

 .nab {
  span {
   padding: _vw(20);
   border: 1px solid #c1c1c1;
   border-radius: _vw(20);
  }
 }

 .t {
  transition: all 0.3s;
  position: relative;
  text-align: center;
  margin-top: _vw(60);
  i {
   position: absolute;
   top: 45%;
   left: 46%;
   color: #fff;
   z-index: 1;
   font-size: _vw(60);
  }
  .tu {
   width: _vw(500);
   height: _vw(500);
  }
  div {
   position: absolute;
   top: _vw(90);
   left: _vw(210);
   .hh {
    width: _vw(330);
    height: _vw(330);
    border-radius: 50%;
   }
  }
 }
 .yin {
  margin-top: _vw(40);
  text-align: center;
  height: _vw(100);
  overflow: hidden;
  color: #f1f1f1;
  .tr {
      box-sizing: border-box;
      overflow: hidden;
      height: _vw(46);
   padding-bottom: _vw(16);
   transition: all 0.5s;
  
  }
 }
}
</style>
